<script setup lang="ts">
import { ref } from 'vue'
import CommentApi, { CommentVo } from '@/api/comment'

const props = defineProps<{
  commentList: CommentVo[]
}>()

const commentContent = ref('')
const replyTo = ref<CommentVo | null>(null)

const handleSubmitComment = async () => {
  if (!commentContent.value.trim()) {
    ElMessage.warning('请输入评论内容')
    return
  }

  const newComment: CommentVo = {
    id: Date.now(),
    articleId: 1,
    rootId: replyTo.value
      ? replyTo.value.rootId === -1
        ? replyTo.value.id
        : replyTo.value.rootId
      : -1,
    content: commentContent.value,
    toCommentUserId: replyTo.value ? replyTo.value.createBy : -1,
    toCommentId: replyTo.value ? replyTo.value.id : -1,
    createBy: 999, // 当前用户ID
    createTime: new Date().toISOString().replace('T', ' ').split('.')[0],
    username: '当前用户',
  }

  const res = await CommentApi.addComment(newComment)
  if (res.success) {
    console.log(res)
  }

  // if (replyTo.value) {
  //   newComment.toUsername = replyTo.value.username
  //   // 找到父评论并添加到其子评论中
  //   const parentComment = props.commentList.find(
  //     (comment) =>
  //       comment.id ===
  //       (replyTo.value?.rootId === -1
  //         ? replyTo.value?.id
  //         : replyTo.value?.rootId)
  //   )
  //   if (parentComment) {
  //     parentComment.children = parentComment.children || []
  //     parentComment.children.push(newComment)
  //   }
  // } else {
  //   props.commentList.unshift(newComment)
  // }

  commentContent.value = ''
  replyTo.value = null
}

const handleReply = (comment: CommentVo) => {
  replyTo.value = comment
  commentContent.value = ''
}

const cancelReply = () => {
  replyTo.value = null
}
</script>

<template>
  <div class="comment-section">
    <h3 class="comment-title">评论区</h3>

    <!-- 评论输入框 -->
    <div class="comment-input-container">
      <div v-if="replyTo" class="reply-info">
        回复 {{ replyTo.username }}：
        <el-button type="text" @click="cancelReply">取消回复</el-button>
      </div>
      <el-input
        v-model="commentContent"
        type="textarea"
        :rows="3"
        placeholder="请输入评论内容..." />
      <el-button type="primary" class="submit-btn" @click="handleSubmitComment">
        发表评论
      </el-button>
    </div>

    <!-- 评论列表 -->
    <div class="comment-list">
      <div
        v-for="comment in commentList"
        :key="comment.id"
        class="comment-item">
        <!-- 主评论 -->
        <div class="comment-main">
          <el-avatar :size="40" class="avatar">
            {{ comment.username?.[0] }}
          </el-avatar>
          <div class="comment-content">
            <div class="comment-header">
              <span class="username">{{ comment.username }}</span>
              <span class="time">{{ comment.createTime }}</span>
            </div>
            <div class="comment-text">{{ comment.content }}</div>
            <div class="comment-actions">
              <el-link type="primary" @click="handleReply(comment)">
                回复
              </el-link>
            </div>
          </div>
        </div>

        <!-- 子评论 -->
        <div v-if="comment.children?.length" class="reply-list">
          <div
            v-for="reply in comment.children"
            :key="reply.id"
            class="reply-item">
            <el-avatar :size="32" class="avatar">
              {{ reply.username?.[0] }}
            </el-avatar>
            <div class="reply-content">
              <div class="comment-header">
                <span class="username">{{ reply.username }}</span>
                <template v-if="reply.toUsername">
                  <span class="reply-to">回复</span>
                  <span class="username">{{ reply.toUsername }}</span>
                </template>
                <span class="time">{{ reply.createTime }}</span>
              </div>
              <div class="comment-text">{{ reply.content }}</div>
              <div class="comment-actions">
                <el-link type="primary" @click="handleReply(reply)">
                  回复
                </el-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.comment-section {
  padding: 20px 0;

  .comment-title {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
  }

  .comment-input-container {
    margin-bottom: 30px;

    .reply-info {
      margin-bottom: 8px;
      color: #666;

      .el-button {
        padding: 0 4px;
      }
    }

    .submit-btn {
      margin-top: 12px;
    }
  }

  .comment-list {
    .comment-item {
      margin-bottom: 24px;

      .comment-main {
        display: flex;
        gap: 12px;
        margin-bottom: 12px;
      }

      .comment-content {
        flex: 1;
      }

      .comment-header {
        margin-bottom: 8px;

        .username {
          font-weight: 500;
          margin-right: 8px;
        }

        .time {
          color: #999;
          font-size: 12px;
        }

        .reply-to {
          color: #999;
          margin: 0 4px;
        }
      }

      .comment-text {
        line-height: 1.6;
        margin-bottom: 8px;
      }

      .comment-actions {
        .el-button {
          padding: 0;
          font-size: 13px;
        }
      }
    }

    .reply-list {
      margin-left: 52px;

      .reply-item {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;

        .reply-content {
          flex: 1;
        }
      }
    }
  }
}

.avatar {
  background-color: #409eff;
  color: #fff;
}
</style>
